<template>
  <div style="padding: 20px;">
    <h2 style="padding-left: 100px">添加管理员</h2>
    <el-form :inline="true" :model="form" :rules="rules" ref="form" label-width="100px" style="padding-left: 200px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入联系方式"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
    </el-form>

    <div style="text-align: center; margin-top: 30px">
      <el-button type="primary" @click="add" size="medium">添加</el-button>
      <el-button type="danger" @click="reset" size="medium">重置</el-button>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "AddAdmin",
  data() {
    const checkUsername = (rule, value, callback) => {
      if(!value){
        callback(new Error('请输入用户名'));
      }else if (!/^[a-zA-Z0-9]{3,30}$/.test(value)) {
        callback(new Error('用户名长度3-30位，由数字或英文字母组成'));
      }
      callback();
    };
    const checkPassword = (rule, value, callback) => {
      if(!value){
        callback(new Error('请输入密码'));
      }else if (!/^\w{5,30}$/.test(value)) {
        callback(new Error('密码长度5-30位，由数字、26个英文字母或者下划线组成'));
      }
      callback();
    };
    const checkPhone = (rule, value, callback) => {
      if(!value){
        callback(new Error('请输入号码'));
      }else if (!/^[1][3-9][0-9]{9}$/.test(value)) {
        callback(new Error('请输入正确的号码'));
      }
      callback();
    };
    const checkEmail = (rule, value, callback) => {
      if(!value){
        callback();
      }else if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
        callback(new Error('请输入正确的邮箱'));
      }
      callback();
    };
    return {
      form: {},
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
        ],
        username: [
          {validator: checkUsername, required: true, trigger: 'blur'}
        ],
        password: [
          {validator: checkPassword, required: true, trigger: 'blur'}
        ],
        phone: [
          {validator: checkPhone, required: true, trigger: 'blur'}
        ],
        email:[
          {validator: checkEmail, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    add() {
      this.$refs["form"].validate((valid) => {
        if(valid){
          request.post('/admin/add', this.form).then(res => {
            if (res.code === "200") {
              this.$notify.success({title: "", message:'添加成功', position: 'bottom-left'})
              this.$refs["form"].resetFields()
            } else {
              this.$notify.error({title: "", message:res.msg, position: 'bottom-left'})
            }
          })
        }
      })
    },
    reset() {
      this.$refs["form"].resetFields()
    }
  }
}
</script>